import { ECameraMoveDirection, ModelCameraService } from '@manycore/custom-sdk';
import { Vue } from 'vue-class-component';
import { getApplication } from '../../../core/app';
import style from './index.module.scss';


export class CameraMoveControl extends Vue {
  private timer: any;

  private onMouseDown = (direction: ECameraMoveDirection) => {
    const cameraService = getApplication().getService(ModelCameraService);
    cameraService.moveCamera(direction);
    this.timer = setInterval(() => {
      cameraService.moveCamera(direction);
    }, 50);
  };

  private clearInterval = () => {
    clearInterval(this.timer);
  };

  render() {
    return (
      <div class={style.root}>
        <div class={style.container}>
          {Object.values(ECameraMoveDirection).map((item) => {
            if (
              item !== ECameraMoveDirection.UP &&
              item !== ECameraMoveDirection.DOWN
            ) {
              const className = item.toLowerCase() as keyof typeof style;
              return (
                <div
                  key={item}
                  class={`${style.base} ${style[className]}`}
                  onMousedown={() => this.onMouseDown(item)}
                  onMouseup={this.clearInterval}
                  onMouseout={this.clearInterval}
                />
              );
            }
            return null;
          })}
        </div>
      </div>
    );
  }
}
